<template>
    <div class="storeInfo">
        <div class="head">               
            <el-button type="danger" @click="mark='add';add_edit_show=true;alerttips='添加'" style="margin-left:30px;margin-top:15px">添加</el-button>           
        </div>
         
        <!-- tab部分 -->
        <div class="tabContainer">
            <el-table :data="tableData" stripe style="width: 100%;text-align:center" 
            tooltip-effect="dark">
                <el-table-column prop="id" label="ID" fixed></el-table-column>
                <el-table-column prop="category_name" label="分类"></el-table-column>
                <el-table-column prop="sex" label="性别">
                    <template slot-scope="scope">
                        <span v-if='scope.row.sex == 1'>女</span>
                        <span v-if='scope.row.sex == 2'>男</span>
                    </template>   
                </el-table-column>
                <el-table-column prop="product_name" label="基准单品"></el-table-column>
                <el-table-column prop="price" label="单价"></el-table-column>

                <el-table-column prop="upgrade_product_name" label="升级商品"></el-table-column>
                <el-table-column prop="match_items" label="关联商品" width="200">
                     <template slot-scope="scope">
                        <span v-if='scope.row.match_items.length == 0'>无</span>
                        <div v-else>
                            <p v-for="item in scope.row.match_items" :key="item.item_id">{{item.item_name}}</p>
                        </div>
                    </template> 
                </el-table-column>
                <el-table-column prop="average_capacity" label="平均酒量"></el-table-column>
                <el-table-column prop="plus_capacity" label="整体加量"></el-table-column>
                <el-table-column prop="update_time" label="更新时间"></el-table-column>

                <el-table-column prop="" label="操作" width="200">
                    <template slot-scope="scope">
                        <span v-for="(item,indexLimit) in limitList" :key="indexLimit" class="lightFont" @click="theClick(item.url,scope.row)">
                            <i>{{item.name}}</i>
                            <i v-if="indexLimit != limitList.length-1">&nbsp;|&nbsp;</i>
                        </span>
                    </template>          
                        
                    
                </el-table-column>
                

            </el-table>
                        
        </div>
        <!-- 分页部分 后台没有做分页-->
        <!-- <el-pagination
            background
            layout="total, prev, pager, next, jumper"
            @current-change="changePage"
            :page-size="size"
            :current-page.sync="pageNum"
            :hide-on-single-page=true
            :total="total">{{total}}
        </el-pagination> -->
  

        <!-- 添加 -->
        <el-dialog :title="alerttips" :visible.sync="add_edit_show">
            <el-form :model="editForm">
                <el-form-item label="选择性别"  :label-width="editW">
                    <el-radio v-model="editForm.sex" label="1">女</el-radio>
                    <el-radio v-model="editForm.sex" label="2">男</el-radio>
                </el-form-item>
                <el-form-item label="基准商品" :label-width="editW">
                    <!-- item_id -->
                    <goodsListBox :input_url="input_url" :default_txt='default_txt1' v-on:getsearchItemGood="getsearchItemGoodF1"></goodsListBox>
                </el-form-item>
                <el-form-item label="关联商品" :label-width="editW">
                    <!-- match_items[0].item_id    -->
                    <goodsListBox :input_url="input_url" :default_txt='default_txt2' v-on:getsearchItemGood="getsearchItemGoodF2"></goodsListBox>
                </el-form-item>
                <el-form-item label="数量" :label-width="editW">
                    <!-- match_items[0].quantity -->
                    <el-input v-model="editForm.match_items[0].quantity" oninput="value=value.replace(/[^(\d+)$]/g,'')"></el-input>
                </el-form-item>
                <el-form-item label="升级商品" :label-width="editW">
                    <!-- upgrade_item_id   -->
                    <goodsListBox :input_url="input_url" :default_txt='default_txt3' v-on:getsearchItemGood="getsearchItemGoodF3"></goodsListBox>
                </el-form-item>
                

                <el-form-item label="平均酒量" :label-width="editW">
                    <el-input v-model="editForm.average_capacity" oninput="value=value.replace(/[^(\d+)(.\d+)?$]/g,'')"></el-input>
                </el-form-item>
                <el-form-item label="整体加量" :label-width="editW">
                    <el-input v-model="editForm.plus_capacity" oninput="value=value.replace(/[^(\d+)(.\d+)?$]/g,'')"></el-input>
                </el-form-item>
                <el-form-item label="推荐语" :label-width="editW">
                    <el-input v-model="editForm.reason"></el-input>
                </el-form-item>
                
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="add_edit_show = false">取 消</el-button>
                <el-button type="primary" @click="addyes">确 定</el-button>
            </div>
        </el-dialog>


    </div>
</template>

<script>
import { abc } from "../../../../js/abc.js";
import {potUrl} from '../../../../js/config_url.js';
import goodsListBox from '../../pop/goodslist.vue';
//import func from '../../../../../vue-temp/vue-editor-bridge';
//* ./vue-temp/vue-editor-bridge in-------vscode 自行在这里加入了一行代码致使报错
// var url= potUrl.rpriceList;
let goodurl = potUrl.itemSearch
export default {
    components:{
        goodsListBox:goodsListBox
    },
    data(){
        return {          
            tableData:[],
            total:50,
            size:20,
            input_url:goodurl,//搜素商品传递给子组件的搜索接口
            default_txt1:'',//基准商品
            default_txt2:'',//关联商品
            default_txt3:'',//升级商品
            alerttips:'',
            form:{
                size:20,
                page:1
            },//搜索内容的参数
            add_edit_show:false,//编辑、添加弹框的显示开关            
            pageNum:1,//page
            limitList:[],//权限的存储数组
            editW:'120px',
            editForm:{
                item_id:'',//基准商品
                sex:'',//性别
                match_items:[{item_id:'',quantity:''}],//关联商品
                average_capacity:'',//平均酒量
                plus_capacity:'',//整体加量
                reason:'',//推荐语
                upgrade_item_id:''//升级商品
                
            },//编辑弹框内需要的数据
            // timev:'',
            limitList_str:'',
            itemGoodsList:{unit_price:''},//搜索商品后返回的数据；obj;
            mark:'',//标记是添加还是编辑
        }
    },
    mounted(){
        var that = this;
        abc.get(that,potUrl.ritemslist,that.form,function(res){
            that.total = res.data.length
            that.tableData =  res.data;
        });//列表 
    },
    created(){
        var that = this;       
        that.limitList = [
            {name:'编辑',url:'edit'},
            {name:'删除',url:'del'}

        ]     
    },
    methods:{   
        getsearchItemGoodF1(data){
            // 基准商品
            this.editForm.item_id = data.item_id;
            this.default_txt1 = data.item_name
        }, 
        getsearchItemGoodF2(data){
            // 关联商品
            this.editForm.match_items[0].quantity = '';
            this.editForm.match_items[0].item_id = data.item_id;
            this.default_txt2 = data.item_name
        }, 
        getsearchItemGoodF3(data){
            // 升级商品
            this.editForm.upgrade_item_id = data.item_id;
            this.default_txt3 = data.item_name
        }, 
        theClick(a,b){
            let that = this;
            if(a == 'edit'){        
                abc.get(that,potUrl.ritemsinfo,{id:b.id},function(res){
                    that.default_txt1 = res.data.product_name;//基准商品
                    that.default_txt2 = res.data.match_items[0].product_name;//关联商品
                    that.default_txt3 = res.data.upgrade_product_name;//升级商品                   
                    that.editForm = res.data;//赋值给编辑的数据；
                    that.add_edit_show =true; 
                    that.alerttips = '编辑'                   
                })
            }else if(a == 'del'){
                abc.twoTips(that,potUrl.ritemsdel,'是否要删除此条数据？',{id:b.id},function() {
                    that.$message({
                        type: 'success',
                        message: '操作成功!'
                    });
                    abc.get(that,potUrl.ritemslist,that.form,function(res){
                        that.total = res.data.length
                        that.tableData =  res.data;
                    });//列表 
                })
            }
            
        },
        changePage(val){
            //翻页
            var that = this;
            that.pageNum = val;
            this.form.page = val;
           abc.getList(that,potUrl.ritemslist,that.form);
        },
        addyes(a){
            //添加时的确定按钮操作；
            let that = this;
            let yesurl = ''
            if(that.mark == 'add'){
                yesurl = potUrl.ritemsadd
            }else{
                yesurl = potUrl.ritemsedit
            }
            that.editForm.match_items = JSON.stringify(that.editForm.match_items)
            abc.post(that,yesurl,that.editForm,function(res){
                that.add_edit_show = false;
                that.editForm={
                    item_id:'',//基准商品
                    sex:'',//性别
                    match_items:[{item_id:'',quantity:''}],//关联商品
                    average_capacity:'',//平均酒量
                    plus_capacity:'',//整体加量
                    reason:'',//推荐语
                    upgrade_item_id:''//升级商品
                    
                }
                abc.get(that,potUrl.ritemslist,that.form,function(res){
                    that.total = res.data.length
                    that.tableData =  res.data;
                });//列表 
            })
            
        }
    }
}

</script>